﻿@{
    ViewBag.Title = "TabStrip : Select Tab and Set Tab Text";
}

<h2>TabStrip : Select Tab and Set Tab Text</h2>

    <h3>Sample</h3>

@{
    Html.Telerik().TabStrip()
        .Name("SampleTabStrip")
        .Items(tabstrip =>
        {
            tabstrip.Add()
                .Text("Tab 1")
                .Selected(true)
                .Content(
                    @<text>
                    <p>Content for the first tab.</p>
                    New Text for First Tab: @Html.TextBox("NewTabOneText")
                    <button onclick="setTabText(0, 'NewTabOneText')">Change Tab Text</button>
                    </text>
                );
            tabstrip.Add()
                .Text("Tab 2")
                .Content(
                    @<text>
                    <p>Content for the second tab.</p>
                    New Text for Second Tab: @Html.TextBox("NewTabTwoText")
                    <button onclick="setTabText(1, 'NewTabTwoText')">Change Tab Text</button>
                    </text>
                );
        })
        .Render();
}

<br />

<button onclick="selectTab(0)">Select Tab One</button>
<button onclick="selectTab(1)">Select Tab Two</button>

<script type="text/javascript">
    selectTab = function (tabIndex) {
        $('#SampleTabStrip').data('tTabStrip').selectTab({ index: tabIndex });
    }
    setTabText = function (tabIndex, textBoxName) {
        var textBox = $('#' + textBoxName);
        $('#SampleTabStrip').data('tTabStrip').setTabText({ index: tabIndex, newText: textBox.val() });
    }
</script>

<h3>Documentation</h3>
<p>
The "Select Tab One" and "Select Tab Two" buttons selects the tab by calling the selectTab() function.  The selectTab()
function takes a json object as the parameter where one of the 2 attributes must be set.  The attributes are:
<ul>
    <li>text: the current text for the tab.</li>
    <li>index: zero based index for the tab.</li>
</ul>
Here are examples of how they are used to select the first tab with the text "Tab 1":
<pre class="code">
$('#SampleTabStrip').data('tTabStrip').selectTab({ text: 'Tab 1' });

$('#SampleTabStrip').data('tTabStrip').selectTab({ index: 0 });
</pre>
</p>

<p>
The Change Tab Text buttons changes the text that is displayed on the tab by calling the setTabText() function.  The
setTabText() function takes a json object as a parameter where the newText attribute is the new text to be displayed
for the tab and the one of 2 attributes need to be set that identifies the tab similar to the selectTab() function.
</p>
<p>
Here are exampels of how to use the setTabText function to change the text on the first tab from "Tab 1" to "Tab One":
<pre class="code">
$('#SampleTabStrip').data('tTabStrip').setTabText({ text: 'Tab 1', newText: 'Tab One' });

$('#SampleTabStrip').data('tTabStrip').setTabText({ index: 0, newText: 'Tab One' });
</pre>
</p>
